<template>
  <div id="editBalance">
      <c-title :hide="false" text="编辑保单"></c-title>
      <div class="content">
          <div class="cell-box" >
            <div class="w187">序号</div>
            <input v-model="serial_number" type="text" placeholder="请输入序号" />
          </div>
          <div class="cell-box" >
            <div class="w187">店面名称</div>
            <input v-model="storeName" type="text" placeholder="请输入店面名称" />
          </div>
          <div class="cell-box" >
            <div class="w187">被保险人</div>
            <input v-model="insuer" type="text" placeholder="请输入营业执照公司名称或法人姓名" />
          </div>
          <div class="cell-box" >
            <div class="w187">证件号码</div>
            <input v-model="certificateNumber" type="text" placeholder="请输入营业执照信用代码、法人身份证号码" />
          </div>
          <div class="cell-box" >
            <div class="w187">被保险人联系方式</div>
            <input v-model="information" type="text" placeholder="请输入保险人联系方式" />
          </div>
          <div class="cell-box" >
            <div class="w187">保险地址</div>
            <input v-model="insuranceAddress" type="text" placeholder="**省**市**区/县**乡/镇**路**号" />
          </div>
          <div class="cell-box" >
            <div class="w187">投保财产</div>
            <input v-model="insuredProperty" type="text" placeholder="需如实填写,尽可能全面" />
          </div>
          <div class="cell-box" >
            <div class="w187">用户类型</div>
            <input v-model="usertype" type="text" placeholder="例如（店铺、仓库、工厂、金店）" />
          </div>
          <div class="cell-box" >
            <div class="w187">保额（万元）</div>
            <input v-model="amountForce" type="text" placeholder="请输入保额" />
          </div>
          <div class="cell-box" >
            <div class="w187">保险期限 (年)</div>
            <input v-model="insurancePeriod" type="text" placeholder="请输入保险期限" />
          </div>
          <div class="cell-box" >
            <div class="w187">保费 (元)</div>
            <input v-model="premium" type="text" placeholder="请输入保费" />
          </div>
          <div class="insurance-type" @click="insuranceTypeshowBtn">
            <div>
              <span class="w187">投保险种</span><span class="main-color fz-26" :class="{'c-00001C':insuranceTypeVal}">{{insuranceTypeVal?insuranceTypeVal:'请选择'}}</span>
            </div>
            <div>
              <span><van-icon name="arrow" /></span>
            </div>
          </div>
          <div class="cell-box" >
            <div class="w187">附加玻璃险（35元保1万）份</div>
            <input v-model="glassRisk" type="text" placeholder="请输入玻璃险" />
          </div>
          <div class="cell-box" >
            <div class="w187">投保人</div>
            <input v-model="insurer" type="text" placeholder="请输入投保人" />
          </div>
          <div class="insurance-type" @click="showCompany" v-if="companyRadio&&isOpenCompany" >
            <div>
              <span class="w187">保险公司</span><span class="main-color fz-26"  :class="{'c-00001C':companyNames}">{{companyNames?companyNames:'请选择'}}</span>
            </div>
            <div>
              <span><van-icon name="arrow" /></span>
            </div>
          </div>
          <div class="cell-box" >
            <div class="w187">备注信息</div>
            <input v-model="Memoinformation" type="text" placeholder="请输入备注信息" />
          </div>
      </div>

      <div class="button">
          <van-button color="#F15353" round  size="normal" block @click="submit">{{this.$route.params.type == 'edit'?'保存':'一键续保'}}</van-button>
      </div>
      <van-popup v-model="insuranceTypeshow" position="bottom" round>
          <van-picker :show-toolbar="true" @confirm="insuranceTypebtn" @cancel="insuranceTypeClose" :columns="columns"/>
      </van-popup>
      <van-popup v-model="selectCompanyPopup"
            position="right"
            closeOnClickModal="true"
            :style="{height:'100%',width:'100%',backgroundColor:'#F5F5F5'}">
          <div class="reportPopHeader">
            <i class="iconfont icon-member-left"
                @click="selectCompanyPopup=false"></i>
            <p>选择保险公司</p>
          </div>
          <form action="/">
            <van-search
              v-model="kwd"
              shape="round"
              background="#ffffff"
              class="bd_search"
              placeholder="请搜索保险公司"
              @search="searchCompany"
              @cancel="onCancel"
            />
          </form>
          <div  class="radio-box" >
            <van-radio-group v-model="companyRadio">
              <van-cell-group>
                <van-cell :title="item.name" class="list_text" clickable v-for="(item, index) in companyList" :key="index" @click="clickRadio(item)">
                  <van-radio slot="right-icon" :name="item.id" checked-color="#FE5E56"/>
                </van-cell>
              </van-cell-group>
            </van-radio-group>
          </div>
          <p @click.stop="getMoreData" v-show="isLoadMore" style="height: 2.5rem; line-height: 2.5rem;">加载更多</p>
          <img src="../../../assets/images/blank.png" alt="" style="width: 5rem; margin: 2rem 0;" v-if="fun.isTextEmpty(companyList)">
      </van-popup>
  </div>
</template>

<script>
import edit_member_balancecontroller from "./edit_member_balancecontroller";
export default edit_member_balancecontroller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

.insurance-type{
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
padding: 1.0313rem 0.75rem;
position: relative;
&::after{
  position: absolute;
  content:"";
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0;
  height: 1px;
  background-color: #F0F0F1;
}
}
.w187{
width: 5.8438rem;
display: inline-block;
font-size: 0.875rem;
flex-shrink: 0;
}
.cell-box{
position: relative;
display: flex;
align-items: center;
background-color: #fff;
padding: 1.0313rem 0.75rem;
}
.cell-box::after{
position: absolute;
content:"";
left: 0.75rem;
right: 0.75rem;
bottom: 0;
height: 1px;
background-color: #F0F0F1;
}
input{
border: none;
font-size: 0.8125rem;
flex:1;
}
input::placeholder{
color:#AAAAB3;
}
.main-color{
color:#AAAAB3;
}
.c-00001C{
color: #00001C;
}


::v-deep .radio-box  .van-cell{
padding: 1.25rem 0.75rem;
}
::v-deep .radio-box .van-cell__title{
font-size: 0.9375rem;
color: #00001C;
}
.radio-box{
margin: 0.625rem 0.75rem;border-radius: 0.5rem;overflow: hidden;
}
::v-deep .van-picker__confirm{
font-size: 0.9375rem;
font-weight: 400;
color: #00001C;
}
::v-deep .van-picker__cancel{
font-size: 0.9375rem;
font-weight: 400;
color: #AAAAB3;
}

#editBalance {
  .button {
      padding: 1rem;
      button{
        font-size: 0.9375rem;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  .content {
    text-align: left;
    margin: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .list_text {
    position: relative !important;
    flex: none;
    position: initial;
    display: -webkit-flex;
    justify-content: space-between;
    &::before{
      content:"";
      position: absolute;
      left: 0.75rem;
      right: 0.75rem;
      bottom: 0;
      height: 1px;
      background-color:#F0F0F1 ;
    }
  }

  .list_text div {
    flex: none;
  }

  .bd_search {
    margin-top: 40px;
  }

  .reportPopHeader {
    position: fixed;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 2.5rem;
    background: white;
    display: flex;
    font-size: 16px;
    text-align: center;
    border-bottom: 0.0625rem solid #f7f7f7;

    p {
      font-weight: bold;
      flex: 1;
      align-self: center;
    }

    i {
      padding: 0.5rem;
      align-self: center;
      flex: 0 0 1.5rem;
    }
  }
}
</style>
